<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Demo</title>
</head>
<body>
<h3 style="text-align: center; width: 95%;">Vue Demo</h3>
<div style="width: 100%;">
    <div style="float: left; width: 25%;">
        <hr>&emsp;&emsp;1.Vue内部指令<hr>
        <ol>
            <li><a href="demo/part1/HelloWorld.html">HelloWorld</a></li>
            <li><a href="demo/part1/Ifelseshow.html">if-else+show</a></li>
            <li><a href="demo/part1/For.html">for</a>&emsp;sorNum();sortObj();</li>
            <li><a href="demo/part1/On.html">on</a>&emsp;4种写法</li>
            <li><a href="demo/part1/Model.html">model</a>&emsp;3种修饰符;checkbox;radio</li>
            <li><a href="demo/part1/Bind.html">bind</a></li>
            <li><a href="demo/part1/Other.html">v-pre;v-cloak;v-once</a></li>
        </ol>
    </div>
    <div style="float: left; width: 25%;">
        <hr>&emsp;&emsp;2.Vue全局API<hr>
        <ol>
            <li><a href="demo/part2/Directive.html">Directive指令</a></li>
            <li><a href="demo/part2/Extend.html">Extend构造器扩展</a></li>
            <li><a href="demo/part2/Set.html">Set全局操作</a></li>
            <li><a href="demo/part2/LifeCycle.html">Vue的生命周期</a></li>
            <li><a href="demo/part2/Template.html">Template</a></li>
            <li><a href="demo/part2/Component1.html">Component</a></li>
            <li><a href="demo/part2/Component2.html">props属性设置</a></li>
            <li><a href="demo/part2/Component3.html">Component父子组件</a></li>
            <li><a href="demo/part2/Component4.html">Component4</a></li>
        </ol>
    </div>
    <div style="float: left; width: 25%;">
        <hr>&emsp;&emsp;3.Vue选项<hr>
        <ol>
            <li><a href="demo/part3/PropsData.html">PropsData</a></li>
            <li><a href="demo/part3/Computed.html">Computed</a></li>
            <li><a href="demo/part3/Method.html">Method</a></li>
            <li><a href="demo/part3/Watch.html">Watch</a></li>
            <li><a href="demo/part3/Mixins.html">Mixins</a></li>
            <li><a href="demo/part3/Extends.html">Exteds</a></li>
        </ol>
    </div>
    <div style="float: left; width: 25%;">
        <hr>&emsp;&emsp;4.实例和内置组件<hr>
        <ol>
            <li><a href="demo/part4/demo1.html">实例属性</a></li>
            <li><a href="demo/part4/demo2.html">实例方法</a></li>
            <li><a href="demo/part4/demo3.html">实例事件</a></li>
            <li><a href="demo/part4/demo4.html">内置组件-slot</a></li>
        </ol>
    </div>
</div>
</body>
</html>